<template>
    <div class="shopping-container">
        <div class="goodsList">
            <router-link class="goodsItem" to="/home/goods" tag="div" v-for="item in carGoods" :key="item.id">
                <img :src="item.src"
                     alt="">
                <p class="title">{{item.name}} 幻彩渐变AI双摄 4GB+64GB 梦幻蓝 全网通4G 双卡双待 水滴全面屏拍照游戏智能手机</p>
                <div class="info">
                    <p class="price">
                        <span class="new">￥{{item.price}}</span>
                        <span class="old">￥1999</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩3件</span>
                    </p>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                carGoods: [
                    {
                        id: 0,
                        name: '小米 红米Redmi Note7',
                        price: 999,
                        src: 'https://m.360buyimg.com/babel/jfs/t30184/230/476184793/260944/53cc2bbc/5bf4b25dN3b673c83.jpg!q70.jpg'
                    },
                    {
                        id: 1,
                        name: '华为 红米Redmi Note7',
                        price: 1999,
                        src: 'https://m.360buyimg.com/babel/jfs/t1/11183/35/3943/371763/5c236b2dE87724d33/81b70b161bb2e061.jpg!q70.jpg'
                    },
                    {
                        id: 2,
                        name: '苹果 红米Redmi Note7',
                        price: 2999,
                        src: 'https://img14.360buyimg.com/n2/jfs/t19780/222/1897536104/310145/ffa04ad5/5add75c8N45d76e9a.jpg!q80.webp'
                    }]
            }
        },
        created() {

        },
        methods: {
            getDetail() {
                this.$router.push('/home/goods')
            },
            getDetail1() {
                this.$router.push({name: "goods", params: {}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .shopping-container {
        .goodsList {
            display: flex;
            flex-wrap: wrap;
            padding: 7px;
            justify-content: space-between;

            .goodsItem {
                width: 49%;
                border: 1px solid #ccc;
                box-shadow: 0 0 5px #999;
                margin: 3px 0;
                padding: 2px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 293px;

                img {
                    width: 100%;
                }

                .title {
                    font-size: 14px;
                    color: #000;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .info {
                    background-color: #eee;

                    p {
                        margin: 0;
                        padding: 5px;
                    }

                    .price {
                        .new {
                            font-size: 16px;
                            color: red;
                            font-weight: 700;
                        }

                        .old {
                            text-decoration: line-through;
                            font-size: 12px;
                            margin-left: 10px;
                        }
                    }

                    .sell {
                        display: flex;
                        justify-content: space-between;
                        font-size: 13px;
                    }

                }
            }
        }
    }
</style>